<template>
	<div class="trouble-item">
		<div class="title">
			<img :src="require('./../image/dander_icon.png')" alt="" />
			<h3>{{ details?.checkName }}</h3>
		</div>
		<div class="item" v-for="(value, key) in typeEnum[active]" :key="key">
			<p>{{ value }}</p>
			<p>{{ details[key] || '-' }}</p>
		</div>
		<div
			class="btn"
			v-if="active === 1"
			@click="toDispose"
		>
			去整改
		</div>
	</div>
</template>

<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
	details: {
		type: Object,
		default: () => {}
	},
	active: {
		type: Number,
		default: 1
	}
})

const router = useRouter()
const typeEnum = {
	1: {
		'checkTime': '检查时间',
		'checkBy': '检查人',
		'jcly': '隐患来源',
	},
	2: {
		'zgTime': '整改时间',
		'zgBy': '整改人',
		'jcly': '隐患来源',
	},
	3: {
		'fhTime': '复核时间',
		'fhBy': '复核人',
		'jcly': '隐患来源',
	}
}

const toDispose = async () => {
	router.push({
		name: 'inspection-trouble-dispose',
		query: {
			id: props.details?.id
		}
	})
}

</script>

<style scoped lang="less">
.trouble-item {
	margin: 24px 32px;
	padding: 24px 32px;
	box-shadow: 0 0 16px 0 rgba(0, 0, 0, .14);
	border-radius: 8px;
	background: #fff;
	h3 {
		margin-bottom: 22px;
	}
	.title {
		display: flex;
		img {
			width: 48px;
			height: 48px;
			margin-right: 12px;
		}
		h3 {
			width: 0;
			flex: 1;
			min-height: 48px;
			line-height: 48px;
		}
	}
	.item {
		display: flex;
		p {
			min-height: 44px;
			line-height: 44px;
			&:nth-of-type(1) {
				width: 160px;
				color: #A0A0A0;
			}
			&:nth-of-type(2) {
				width: 0;
				flex: 1;
				color: #696969;
			}
		}
	}
	.btn {
		align-items: center;
		border-top: 2px solid var(--border-color);
		margin-top: 22px;
		padding-top: 22px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		color: var(--van-primary-color);
	}
}
</style>
